<template>
    <div class="app-container">
        <div v-if="$route.path == '/accountList'">
            <section>
                <div class="content" v-loading="loading">
                    <div class="p30 flex mr30">
                        <el-button class="left-auto" type="primary" size="mini" @click=" $router.push( `/accountDetail?title=添加` ) " >添加</el-button >
                        <el-button @click="del" size="mini" type="danger" >批量删除</el-button >
                    </div>
                    <!-- <el-col :span="4">
                            <el-input v-model="form.keys" placeholder="名称/账号/电话/负责人" style="width:100%" suffix-icon="el-icon-search" @blur="getCompanyList(1)"></el-input>
                        </el-col> -->
                    <div class="p30">
                        <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%; margin-top: 10px"
                            :header-cell-style="{ background: '#f5f6f8' }"
                        >
                            <el-table-column 
                            type="selection" 
                            :selectable="checkSelectable"
                            width="55">
                            </el-table-column>
                            <el-table-column prop="id" label="编号">
                            </el-table-column>
                            <el-table-column prop="username" label="账号">
                            </el-table-column>
                            <el-table-column label="角色">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.role">{{ scope.row.role.name }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="realname" label="姓名">
                            </el-table-column>
                            <el-table-column
                                prop="create_time"
                                label="创建时间"
                            >
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-switch
                                        :value="
                                            scope.row.status == 1 ? true : false
                                        "
                                        :disabled="scope.row.id == userInfo.id"
                                        active-color=" #13ce66"
                                        inactive-color="#ff4949"
                                        @change="handleStatus(scope.row)"
                                    >
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="300">
                                <template slot-scope="scope">
                                    <el-button
                                        @click="handleClick(scope.row, 0)"
                                        size="mini"
                                        >编辑</el-button
                                    >
                                    <el-button
                                        @click="handleClick(scope.row,3)"
                                        type="primary"
                                        size="mini"
                                        >权限分配</el-button
                                    >
                                    <el-button
                                        @click="handleClick(scope.row, 1)"
                                        type="info"
                                        size="mini"
                                        >详情</el-button
                                    >
                                    <el-button
                                        v-if="scope.row.id!=1&&scope.row.id!=2&&scope.row.id!=3"
                                        @click="handleClick(scope.row, 2)"
                                        type="danger"
                                        size="mini"
                                        >删除</el-button
                                    >
                                    <!-- <el-button @click="handleClick(scope.row,3)" type="warning" size="mini">改密</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-pagination
                        style="
                            margin-top: 40px;
                            text-align: center;
                            padding-bottom: 20px;
                        "
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="form.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="form.total"
                    >
                    </el-pagination>
                </div>
            </section>
            <el-dialog
                title="修改密码"
                :visible.sync="dialogVisible"
                width="30%"
            >
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="password" label="新密码">
                        <el-input
                            v-model="form.new_pwd"
                            placeholder="请输入新密码"
                            style="width: 50%"
                            type="password"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="new_pwd" label="新密码">
                        <el-input
                            v-model="form.new_pwd"
                            placeholder="请输入新密码"
                            style="width: 50%"
                            type="password"
                            show-password
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="new_pwd" label="新密码">
                        <el-input
                            v-model="form.new_pwd"
                            placeholder="请输入新密码"
                            style="width: 50%"
                            type="password"
                            show-password
                        ></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sure">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
        var password = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请输入密码"));
            } else if (
                value.toString().length < 6 ||
                value.toString().length > 20
            ) {
                callback(new Error("密码长度为6 - 20个字符"));
            } else {
                callback();
            }
        };
        return {
            form: {
                keys: "",
                total: 0,
                limit: 10,
                page: 1,
                new_pwd: "",
            },
            rules: {
                new_pwd: [
                    { required: true, validator: password, trigger: "blur" },
                ],
            },
            id: "",
            new_pwd: "",
            dialogVisible: false,
            tableData: [],
            loading: false,
        };
    },
    computed:{
        ...mapState('user',['userInfo'])
    },
    created() {},
    mounted() {
        this.getCompanyList();
    },
    methods: {
        checkSelectable(val){
            return val.id!=1&&val.id!=2&&val.id!=3
        },
        async handleStatus(row) {
            if (row.status == 1) {
                row.status = 0;
            } else {
                row.status = 1;
            }
            await this.$Http.changeStatus({
                id: row.id,
                field: "status",
                value: row.status,
            });
        },
        // 获取公司列表
        async getCompanyList(page) {
            if (page) {
                this.form.page = page;
            }
            this.loading = true;
            let res = await this.$Http.getUserList(this.form);
            if (res.code == 10000) {
                this.tableData = res.data.data || [];
                console.log(this.tableData);
                this.form.total = res.data.total;
            }
            this.loading = false;
        },
        async sure() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setCompanyPwd({
                        id: this.id,
                        new_pwd: this.form.new_pwd,
                    });
                    if (res.code == 10000) {
                        this.$message.success("修改成功");
                        this.getCompanyList();
                        this.dialogVisible = false;
                    }
                } else {
                    return false;
                }
            });
        },
        del() {
            let data = this.$refs.multipleTable.selection;
            if (!data.length) {
                this.$message.warning("请至少选择一个选项");
                return false;
            }
            let ids = [];
            for (let item of data) {
                ids.push(item.id);
            }
            this.$confirm("选中的选项将会被删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let res = await this.$Http.delUserInfo({
                    id: ids.join(","),
                    status: -1,
                });
                if (res.code) {
                    if (ids.length == this.tableData.length) {
                        this.form.page -= 1;
                        this.form.page =
                            this.form.page < 1 ? 1 : this.form.page;
                    }
                    this.$message.success("删除成功");
                    await this.getCompanyList();
                }
            });
        },
        handleClick(row, flag) {
            if (flag == 0) {
                //编辑
                this.$router.push(
                    `/accountDetail?title=编辑&id=${row.id}`
                );
            } else if (flag == 1) {
                //详情
                this.$router.push(
                    `/accountDetail?title=详情&id=${row.id}`
                );
            } else if (flag == 2) {
                this.$confirm("该条将会被删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(async () => {
                    let res = await this.$Http.delUserInfo({ id: row.id });
                    if (res.code) {
                        if (this.tableData.length == 1) {
                            this.form.page -= 1;
                            this.form.page = this.form.page < 1 ? 1 : this.form.page;
                        }
                        this.$message.success("删除成功");
                        await this.getCompanyList();
                    }
                });
            } else if (flag == 3) {
                this.$router.push(
                    `/accountbution?type=2&id=${row.id}&name=${row.realname}`
                );
            }
        },
        handleSizeChange(val) {
            this.form.limit = val;
            this.getCompanyList();
        },
        handleCurrentChange(val) {
            this.form.page = val;
            this.getCompanyList();
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container {
    .kong {
        height: 40px;
    }
    section {
        background: #eee;
        min-height: calc(100vh - 90px );
        padding: 30px;
        
        .content {
            width: 100%;
            background: #fff;
            border-radius: 16px;
            padding-top: 18px;
            min-height: calc(100vh - 150px );
            .top {
                padding-left: 29px;
            }
            ::v-deep .el-checkbox__input {
                margin-left: 10px;
            }
            ::v-deep .el-date-editor {
                width: -webkit-fill-available;
            }
        }
    }
}
</style>